import React from "react"
import { Image, Text, View } from "@tarojs/components"
import GpRate from "@/components/GpRate"
import clsx from "clsx"
import { pageMapper } from "@/constants/pageMap"
import { navigation } from "@/utils/router"
import styles from "./index.module.scss"

type IProps = {
  className?: string
  schoolItem: IApiRelative.IHome.SchoolRecommendResult
}
/** 首页‘艺考院校’列表item */
const GpSchoolItem: React.FC<IProps> = (props: IProps) => {
  const { className, schoolItem } = props
  const _features = (schoolItem.features || []).slice(0, 2)
  function handleJump() {
    navigation(pageMapper.shoolDetail, { id: schoolItem.id })
  }
  return (
    <View className={clsx(styles["school-item"], className)} onClick={handleJump}>
      <View className="w-140px h-140px box-border flex-none">
        <Image
          src={schoolItem.logo as string}
          className="w-140px h-140px box-border"
          mode="aspectFit"
        />
      </View>
      <View
        className="flex-1 flex flex-col justify-between ml-24px"
        style={{
          width: "76%"
        }}
      >
        <View className="flex flex-row justify-start items-center">
          <Text className="yahei font-normal text-32px text-hex-2c2c35 truncate">
            {schoolItem.name}
          </Text>
          <Text className="yahei font-normal text-22px text-hex-666 h-32px flex-none box-border leading-32px px-10px rounded-4px bg-hex-f6f7f9 ml-12px">
            {schoolItem.province}
          </Text>
          <Text className="yahei font-normal flex-none justify-self-end ml-auto break-all text-24px text-hex-b8b8bf">
            {schoolItem.level}
          </Text>
        </View>
        <View className="flex flex-row items-center">
          {_features.map((l, index) => (
            <Text className={clsx("yahei mr-8px", styles["tag"])} key={index}>
              {l}
            </Text>
          ))}
        </View>
        <View className="flex flex-row items-center">
          <Text className="yahei font-normal text-24px text-hex-b8b8bf">满意度：</Text>
          <GpRate rate={schoolItem.rate || 0} />
        </View>
      </View>
    </View>
  )
}
export default GpSchoolItem
